<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家注册 - 灵犀智苑</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #4361ee;
            --primary-light: #5e72e4;
            --secondary: #4cc9f0;
            --accent: #e67e22;
            --light: #ecf0f1;
            --dark: #34495e;
            --darker: #2c3e50;
            --text: #2c3e50;
            --text-light: #7f8c8d;
            --glass: rgba(255, 255, 255, 0.2);
            --border: rgba(255, 255, 255, 0.3);
            --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            --transition: all 0.3s ease;
            --success: #28a745;
            --warning: #ffc107;
            --info: #17a2b8;
            --danger: #dc3545;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }

        .background-blur {
            position: fixed;
            top: -50px;
            left: -50px;
            right: -50px;
            bottom: -50px;
            background: url('');
            filter: blur(40px);
            z-index: -1;
        }

        .glass {
            background: var(--glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            border-radius: 20px;
            overflow: hidden;
        }

        /* 登录/注册表单容器 */
        .auth-container {
            width: 90%;
            max-width: 450px;
            padding: 2.5rem;
            text-align: center;
            position: relative;
            z-index: 1;
            max-height: 95vh;
            overflow-y: auto;
            animation: fadeIn 0.6s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .auth-logo {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .auth-logo-icon {
            margin-right: 10px;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .auth-title {
            font-size: 1.8rem;
            color: var(--darker);
            margin: 0 auto 1.5rem;
            text-align: center;
            display: block;
            width: 100%;
            position: relative;
            padding-top: 10px;
        }

        .form-group {
            margin-bottom: 1.5rem;
            text-align: left;
            animation: slideIn 0.5s ease-out;
            animation-fill-mode: both;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--darker);
        }

        .required-star {
            color: var(--danger);
            margin-left: 4px;
        }

        .form-control {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
        }

        .btn-submit {
            background: linear-gradient(90deg, var(--primary), var(--accent));
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: var(--transition);
            margin-top: 1rem;
            animation: fadeIn 0.6s ease-out;
            animation-delay: 0.4s;
            animation-fill-mode: both;
        }

        .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        .btn-submit:active {
            transform: translateY(-1px);
        }

        .auth-link {
            display: block;
            margin-top: 1.5rem;
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
        }

        .auth-link:hover {
            color: var(--primary-light);
            text-decoration: underline;
        }

        .error-message {
            color: var(--danger);
            font-size: 0.85rem;
            margin-top: 0.3rem;
            display: none;
            animation: fadeIn 0.3s ease-out;
        }

        .terms-container {
            margin-top: 0.5rem;
            text-align: left;
            padding: 10px;
            background-color: rgba(236, 240, 241, 0.4);
            border-radius: 10px;
            border: 1px solid #ddd;
        }

        .terms-container label {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .terms-container input[type="checkbox"] {
            margin-right: 10px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .terms-link {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

        .terms-link:hover {
            color: var(--primary-light);
            text-decoration: underline;
        }

        /* 滚动条样式 */
        .auth-container::-webkit-scrollbar {
            width: 8px;
        }

        .auth-container::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }

        .auth-container::-webkit-scrollbar-thumb {
            background: rgba(67, 97, 238, 0.4);
            border-radius: 10px;
        }

        .auth-container::-webkit-scrollbar-thumb:hover {
            background: rgba(67, 97, 238, 0.6);
        }

        /* 响应式设计 */
        @media (max-width: 500px) {
            .auth-container {
                padding: 1.8rem;
            }
            
            .auth-logo {
                font-size: 2rem;
            }
            
            .auth-title {
                font-size: 1.6rem;
                margin-bottom: 1.2rem;
            }
            
            .form-group {
                margin-bottom: 1.2rem;
            }
            
            .terms-container label {
                font-size: 0.9rem;
            }
        }

        /* 输入错误样式 */
        .error {
            border-color: var(--danger) !important;
        }
        
        .error:focus {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
        }
    </style>
</head>
<body>
    <div class="background-blur"></div>
    
    <div class="auth-container glass">
        <div class="auth-logo">
            <span class="auth-logo-icon">✨</span>
            <span>灵犀智苑</span>
        </div>
        <h1 class="auth-title">商家注册</h1>
        
        <form id="register-form">
            <div class="form-group">
                <label for="merchant-name">商家名称 <span class="required-star">*</span></label>
                <input type="text" id="merchant-name" class="form-control" placeholder="请输入您的商家名称">
                <div class="error-message" id="name-error">商家名称不能为空</div>
            </div>

            <div class="form-group">
                <label for="merchant-email">电子邮箱 <span class="required-star">*</span></label>
                <input type="email" id="merchant-email" class="form-control" placeholder="请输入您的电子邮箱">
                <div class="error-message" id="email-error">请输入有效的电子邮箱</div>
            </div>
            
            <div class="form-group">
                <label for="merchant-password">密码 <span class="required-star">*</span></label>
                <input type="password" id="merchant-password" class="form-control" placeholder="请输入密码 (至少6位)">
                <div class="error-message" id="password-error">密码长度至少为6位</div>
            </div>
            
            <div class="form-group">
                <label for="confirm-password">确认密码 <span class="required-star">*</span></label>
                <input type="password" id="confirm-password" class="form-control" placeholder="请再次输入密码">
                <div class="error-message" id="confirm-password-error">两次输入的密码不一致</div>
            </div>
            
            <div class="form-group">
                <label for="merchant-phone">联系电话 <span class="required-star">*</span></label>
                <input type="tel" id="merchant-phone" class="form-control" placeholder="请输入您的联系电话">
                <div class="error-message" id="phone-error">请输入有效的联系电话</div>
            </div>
            
            <div class="form-group">
                <label for="merchant-address">商家地址 <span class="required-star">*</span></label>
                <input type="text" id="merchant-address" class="form-control" placeholder="请输入您的商家地址">
                <div class="error-message" id="address-error">商家地址不能为空</div>
            </div>
            
            <div class="form-group">
                <label for="merchant-description">商家简介</label>
                <textarea id="merchant-description" class="form-control" placeholder="请输入商家简介 (限200字)" rows="3"></textarea>
            </div>
            
            <div class="form-group">
                <label for="business-hours">营业时间</label>
                <input type="text" id="business-hours" class="form-control" placeholder="例如: 9:00-21:00">
            </div>
            
            <div class="form-group">
                <div class="terms-container">
                    <label>
                        <input type="checkbox" id="terms-agree">
                        我已阅读并同意<a href="#" class="terms-link">《服务条款》</a>
                        <span class="required-star">*</span>
                    </label>
                    <div class="error-message" id="terms-error">请阅读并同意服务条款</div>
                </div>
            </div>
            
            <button type="submit" class="btn-submit">注册</button>
            
            <a href="merchant_login.html" class="auth-link">已有账号？立即登录</a>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const registerForm = document.getElementById('register-form');
            const merchantNameInput = document.getElementById('merchant-name');
            const merchantEmailInput = document.getElementById('merchant-email');
            const merchantPasswordInput = document.getElementById('merchant-password');
            const confirmPasswordInput = document.getElementById('confirm-password');
            const merchantPhoneInput = document.getElementById('merchant-phone');
            const merchantAddressInput = document.getElementById('merchant-address');
            const termsAgreeCheckbox = document.getElementById('terms-agree');

            // 错误信息元素
            const nameError = document.getElementById('name-error');
            const emailError = document.getElementById('email-error');
            const passwordError = document.getElementById('password-error');
            const confirmPasswordError = document.getElementById('confirm-password-error');
            const phoneError = document.getElementById('phone-error');
            const addressError = document.getElementById('address-error');
            const termsError = document.getElementById('terms-error');

            // 验证电子邮箱格式
            function validateEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(String(email).toLowerCase());
            }

            // 验证电话号码格式（支持11位手机号或带区号的固话）
            function validatePhone(phone) {
                const re = /^(?:(?:\+|00)86)?1[3-9]\d{9}$|^(?:(?:\d{3}-)?\d{8}|(?:\d{4}-)?\d{7,8})(?:-\d+)?$/;
                return re.test(String(phone).trim());
            }

            // 显示错误信息
            function showError(input, errorElement, message) {
                input.classList.add('error');
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }

            // 清除错误信息
            function clearError(input, errorElement) {
                input.classList.remove('error');
                errorElement.style.display = 'none';
            }

            // 表单提交事件
            registerForm.addEventListener('submit', function(e) {
                e.preventDefault();
                let isValid = true;

                // 重置所有错误状态
                clearError(merchantNameInput, nameError);
                clearError(merchantEmailInput, emailError);
                clearError(merchantPasswordInput, passwordError);
                clearError(confirmPasswordInput, confirmPasswordError);
                clearError(merchantPhoneInput, phoneError);
                clearError(merchantAddressInput, addressError);
                termsError.style.display = 'none';

                // 验证商家名称
                if (merchantNameInput.value.trim() === '') {
                    showError(merchantNameInput, nameError, '商家名称不能为空');
                    isValid = false;
                }

                // 验证电子邮箱
                const email = merchantEmailInput.value.trim();
                if (email === '') {
                    showError(merchantEmailInput, emailError, '电子邮箱不能为空');
                    isValid = false;
                } else if (!validateEmail(email)) {
                    showError(merchantEmailInput, emailError, '请输入有效的电子邮箱');
                    isValid = false;
                }

                // 验证密码
                const password = merchantPasswordInput.value;
                if (password === '') {
                    showError(merchantPasswordInput, passwordError, '密码不能为空');
                    isValid = false;
                } else if (password.length < 6) {
                    showError(merchantPasswordInput, passwordError, '密码长度至少为6位');
                    isValid = false;
                }

                // 验证确认密码
                const confirmPassword = confirmPasswordInput.value;
                if (confirmPassword === '') {
                    showError(confirmPasswordInput, confirmPasswordError, '请确认密码');
                    isValid = false;
                } else if (confirmPassword !== password) {
                    showError(confirmPasswordInput, confirmPasswordError, '两次输入的密码不一致');
                    isValid = false;
                }

                // 验证电话号码
                const phone = merchantPhoneInput.value.trim();
                if (phone === '') {
                    showError(merchantPhoneInput, phoneError, '联系电话不能为空');
                    isValid = false;
                } else if (!validatePhone(phone)) {
                    showError(merchantPhoneInput, phoneError, '请输入有效的联系电话');
                    isValid = false;
                }

                // 验证商家地址
                if (merchantAddressInput.value.trim() === '') {
                    showError(merchantAddressInput, addressError, '商家地址不能为空');
                    isValid = false;
                }

                // 验证服务条款
                if (!termsAgreeCheckbox.checked) {
                    termsError.style.display = 'block';
                    isValid = false;
                }

                // 如果所有验证通过
                if (isValid) {
                    // 添加注册成功动画效果
                    const submitBtn = document.querySelector('.btn-submit');
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
                    submitBtn.disabled = true;
                    
                    // 模拟注册过程
                    setTimeout(() => {
                        submitBtn.innerHTML = '<i class="fas fa-check"></i> 注册成功';
                        submitBtn.style.background = 'linear-gradient(90deg, var(--success), var(--primary))';
                        
                        // 模拟注册成功并跳转
                        setTimeout(() => {
                            alert('注册成功！即将跳转到登录页面。');
                            window.location.href = 'merchant_login.html';
                        }, 800);
                    }, 1500);
                }
            });

            // 实时输入验证
            merchantNameInput.addEventListener('input', () => {
                if (merchantNameInput.value.trim() !== '') {
                    clearError(merchantNameInput, nameError);
                }
            });
            
            merchantEmailInput.addEventListener('input', () => {
                const email = merchantEmailInput.value.trim();
                if (email !== '' && validateEmail(email)) {
                    clearError(merchantEmailInput, emailError);
                }
            });
            
            merchantPasswordInput.addEventListener('input', () => {
                const password = merchantPasswordInput.value;
                if (password !== '' && password.length >= 6) {
                    clearError(merchantPasswordInput, passwordError);
                    
                    // 如果确认密码有值，同时验证确认密码
                    if (confirmPasswordInput.value !== '') {
                        if (confirmPasswordInput.value === password) {
                            clearError(confirmPasswordInput, confirmPasswordError);
                        }
                    }
                }
            });
            
            confirmPasswordInput.addEventListener('input', () => {
                const password = merchantPasswordInput.value;
                const confirmPassword = confirmPasswordInput.value;
                
                if (confirmPassword !== '') {
                    if (password === confirmPassword) {
                        clearError(confirmPasswordInput, confirmPasswordError);
                    }
                }
            });
            
            merchantPhoneInput.addEventListener('input', () => {
                const phone = merchantPhoneInput.value.trim();
                if (phone !== '' && validatePhone(phone)) {
                    clearError(merchantPhoneInput, phoneError);
                }
            });
            
            merchantAddressInput.addEventListener('input', () => {
                if (merchantAddressInput.value.trim() !== '') {
                    clearError(merchantAddressInput, addressError);
                }
            });
            
            termsAgreeCheckbox.addEventListener('change', () => {
                if (termsAgreeCheckbox.checked) {
                    termsError.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>